<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>LearnOpenGLES</title>
        <script src="base/ShaderUtil.js"></script>
        <script src="base/TextureUtil.js"></script>
        <script src="base/GeometryUtil.js"></script>
        <script src="base/FontUtil.js"></script>
        <script src="base/Drawable.js"></script>
        <script src="base/FrameBufferObject.js"></script>
        <script src="public/gl-matrix.js"></script>
        <script src="public/three/three.js"></script>
        <script src="public/three/OBJLoader.js"></script>
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <script src="public/jquery/jquery.i18n.properties-1.0.9.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 1440px;
                height: 720px;
                background-color: rgb(238, 238, 238);
            }
            div#horizontal {
                display: flex;
            }
            div#id_shader {
                display: none;
            }
            div#id_mvpmatrix {
                display: none;
            }
            div#id_modelmatrix {
                display: flex;
            }
            div#id_viewmatrix {
                display: none;
            }
            div#id_projmatrix {
                display: none;
            }
            div#id_rotatematrix {
                display: none;
            }
            div#id_axisangle {
                display: none;
            }
            div#id_quaternion {
                display: none;
            }
            div#id_cobramaneuvre {
                display: none;
            }
            div#id_lightdemo {
                display: none;
            }
            div#id_per_vertex_or_frag_lighting {
                display: none;
            }
            div#id_shadowdemo {
                display: none;
            }
            div#id_per_vertex_shader {
                display: flex;
            }
            div#id_per_frag_shader {
                display: none;
            }
            div#id_uv_demo {
                display: none;
            }
            div#matrix {
                margin: 10px;
            }
            div#id_yuv_video {
                display: none;
            }
            div#id_video_filter {
                display: flex;
            }
        </style>
        <script src="base/GLCanvas.js"></script>
        <script src="learnOpenGLES.js"></script>
    </head>

    <body style="background: #ffffff" 
          onload="onSurfaceCreated('glcanvas');" 
          onresize="onSurfaceChanged()"
          onunload="onDestoryed()"
          onkeypress="onKeyPress(event)">
        <div id="vertical">
            <div id="horizontal">
                <div style="width: 230px; background: #ffffff">
                    <ul>
                        <div id="horizontal">
                            <select id="language_select" name="language" onchange="languageSelect(this)">
                                <option value="zh_cn" id="zh_cn">
                                    中文 – 简体
                                </option>
                                <option value="en" id="en">
                                    English
                                </option>
                            </select>
                            <div id="FPS" style="margin: 5px">FPS: </div>
                        </div>
    
                        <li data-lang="transform_matrix">变换矩阵</li>
                            <ul>
                                <li><a href="#TOC1.1" onclick="switchDemo('ModelMatrix')" data-lang="model_matrix">模型矩阵</a></li>
                                <li><a href="#TOC1.2" onclick="switchDemo('EulerAngle')" data-lang="euler_angle">欧拉角、万向节</a></li>
                                <li><a href="#TOC1.3" onclick="switchDemo('AxisAngle')" data-lang="axis_angle">轴-角</a></li>
                                <li><a href="#TOC1.4" onclick="switchDemo('Quaternion')" data-lang="quaternion">四元数</a></li>
                                <li><a href="#TOC1.5" onclick="switchDemo('ViewMatrix')" data-lang="view_matrix">视图矩阵</a></li>
                                <li><a href="#TOC1.6" onclick="switchDemo('ProjectionMatrix')()" data-lang="proj_matrix">投影矩阵</a></li>
                                <li><a href="#TOC1.7" onclick="switchDemo('MvpMatrix')" data-lang="mvp_matrix">MVP</a></li>
                                <li><a href="#TOC1.7" onclick="switchDemo('CobraManeuvre')" data-lang="rotation_demo">眼镜蛇+落叶飘动画</a></li>
                            </ul>
                        <li data-lang="rendering_tube">渲染管线</li>
                            <ul>
                                <li><a href="#TOC0.1" onclick="switchDemo('Shader')" data-lang="shader">着色器</a></li>
                            </ul>
                        <li data-lang="texture">纹理</li>
                            <ul>
                                <li><a href="#TOC2.1" onclick="switchDemo('UV')" data-lang="uv_coord">UV坐标</a></li>
                                <li><a href="#TOC2.2" data-lang="blend_sort">混合与透明排序</a></li>
                                <li><a href="#TOC2.3" data-lang="sample">采样器</a></li>
                                <li><a href="#TOC2.4" data-lang="mipmap">Mipmap</a></li>
                                <li><a href="#TOC2.4" onclick="switchDemo('YUVVideo')" data-lang="yuv_video">YUV视频渲染</a></li>
                            </ul>
                        </li>
                        <li data-lang="lighting">光照</li>
                            <ul>
                                <li><a href="#TOC3.1" onclick="switchDemo('Light')" data-lang="basic_light">基本光照</a></li>
                                <li><a href="#TOC3.2" onclick="switchDemo('PerVertexOrFragLighting')" data-lang="per_vertex_frag_lighting">逐顶点&逐像素光照</a></li>
                                <li><a href="#TOC3.3" onclick="switchDemo('Shadow')" data-lang="fbo_shadow">FBO、RTT、阴影</a></li>
                                <li><a href="#TOC3.4" data-lang="fresnel_reflection">菲涅尔效果</a></li>
                                <li><a href="#TOC3.5" data-lang="normal_mapping">法线贴图</a></li>
                                <li><a href="#TOC3.6" data-lang="lens_flare">镜头光晕</a></li>
                                <li><a href="#TOC3.7" data-lang="pbr_rending">PBR</a></li>
                            </ul>
                        </li>
                        <!-- <li data-lang="scene_management">场景管理</li>
                            <ul>
                                <li><a href="#TOC4.1" data-lang="scene_tree">场景树</a></li>
                                <li><a href="#TOC4.2" data-lang="quad_oct_tree">四叉/八叉树</a></li>
                                <li><a href="#TOC4.3" data-lang="level_of_detail">LOD层次细节</a></li>
                            </ul>
                        </li> -->
                        <li data-lang="works">作品</li>
                            <ul>
                                <li><a href="https://dreamcloudwalker.gitee.io/threebody" data-lang="three_body">三体专题</a></li>
                                <li><a href="https://dreamcloudwalker.gitee.io/dancing" data-lang="dance_anim">福利</a></li>
                            </ul>
                        </li>
                    </ul> 
                </div>

                <canvas id="glcanvas" width="1440" height="720">Looks like your browser do not support WebGL!</canvas>
            </div>
            <div id="id_shader">
                <button style="display:block; width: 230px; height: 50px" onclick="updateBackgroundShader()" data-lang="compile_and_run_shader">编译并运行着色器&#13;&#10;(左窗口背景绘制为例)</button>
                <div id="vertical">
                    <div id="horizontal" style="width: 90em;">
                        <div id="vertical">
                            <b>顶点着色器（VertexShader)</b>
                            <textarea spellcheck="false" rows="10" cols="95" id="id_vertex_shader">
attribute vec4 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;

void main() {
    gl_Position = aPosition;    // multi identity matrix
    vTexCoord = aTexCoord;
}
                            </textarea>
                        </div>
                        <div id="vertical">
                            <b>片元着色器（FragmentShader)</b>
                            <textarea spellcheck="false" rows="10" cols="95" id="id_fragment_shader">
precision mediump float;

uniform sampler2D uTexSampler;
varying vec2 vTexCoord;

void main() {
    vec4 color = texture2D(uTexSampler, vTexCoord);
    gl_FragColor = color;
}
                            </textarea>
                        </div>
                    </div><br>
                    <h5 data-lang="render_flow_eg">渲染管线流程图如下：</h5>
                    <img style="width:700px;" src="./texture/render_tube.jpg">
                    <img style="width:700px;" src="./texture/render_flow.jpg">
                </div>
            </div>
            <div id="id_mvpmatrix">
                <h4 style="width: 230px; background: #ffffff" data-lang="mvp_demo">MVP矩阵（以计算左边窗口红色圆柱中心点屏幕坐标为例）</h4>
                <div style="border: 1px solid #cccccc; width: 60em; padding: 5px">
                    MVP = ProjMatrix * ViewMatrix * ModelMatrix
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_m00">1.00</label><br/>
                            <br/><label id="id_mvp_m10">0.00</label><br/>
                            <br/><label id="id_mvp_m20">0.00</label><br/>
                            <br/><label id="id_mvp_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_m01">0.00</label><br/>
                            <br/><label id="id_mvp_m11">1.00</label><br/>
                            <br/><label id="id_mvp_m21">0.00</label><br/>
                            <br/><label id="id_mvp_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_m02">0.00</label><br/>
                            <br/><label id="id_mvp_m12">0.00</label><br/>
                            <br/><label id="id_mvp_m22">1.00</label><br/>
                            <br/><label id="id_mvp_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_m03">0.00</label><br/>
                            <br/><label id="id_mvp_m13">0.00</label><br/>
                            <br/><label id="id_mvp_m23">0.00</label><br/>
                            <br/><label id="id_mvp_m33">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>=</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_proj_m00">1.00</label><br/>
                            <br/><label id="id_mvp_proj_m10">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m20">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_proj_m01">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m11">1.00</label><br/>
                            <br/><label id="id_mvp_proj_m21">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_proj_m02">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m12">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m22">1.00</label><br/>
                            <br/><label id="id_mvp_proj_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_proj_m03">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m13">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m23">0.00</label><br/>
                            <br/><label id="id_mvp_proj_m33">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>*</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_view_m00">1.00</label><br/>
                            <br/><label id="id_mvp_view_m10">0.00</label><br/>
                            <br/><label id="id_mvp_view_m20">0.00</label><br/>
                            <br/><label id="id_mvp_view_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_view_m01">0.00</label><br/>
                            <br/><label id="id_mvp_view_m11">1.00</label><br/>
                            <br/><label id="id_mvp_view_m21">0.00</label><br/>
                            <br/><label id="id_mvp_view_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_view_m02">0.00</label><br/>
                            <br/><label id="id_mvp_view_m12">0.00</label><br/>
                            <br/><label id="id_mvp_view_m22">1.00</label><br/>
                            <br/><label id="id_mvp_view_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_view_m03">0.00</label><br/>
                            <br/><label id="id_mvp_view_m13">0.00</label><br/>
                            <br/><label id="id_mvp_view_m23">0.00</label><br/>
                            <br/><label id="id_mvp_view_m33">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>*</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_model_m00">1.00</label><br/>
                            <br/><label id="id_mvp_model_m10">0.00</label><br/>
                            <br/><label id="id_mvp_model_m20">0.00</label><br/>
                            <br/><label id="id_mvp_model_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_model_m01">0.00</label><br/>
                            <br/><label id="id_mvp_model_m11">1.00</label><br/>
                            <br/><label id="id_mvp_model_m21">0.00</label><br/>
                            <br/><label id="id_mvp_model_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_model_m02">0.00</label><br/>
                            <br/><label id="id_mvp_model_m12">0.00</label><br/>
                            <br/><label id="id_mvp_model_m22">1.00</label><br/>
                            <br/><label id="id_mvp_model_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_model_m03">0.00</label><br/>
                            <br/><label id="id_mvp_model_m13">0.00</label><br/>
                            <br/><label id="id_mvp_model_m23">0.00</label><br/>
                            <br/><label id="id_mvp_model_m33">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">
                    </div>
                    
                    CVV_Coord = MvpMatrix * Coord
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_coord_homog_x">1.00</label><br/>
                            <br/><label id="id_mvp_coord_homog_y">0.00</label><br/>
                            <br/><label id="id_mvp_coord_homog_z">0.00</label><br/>
                            <br/><label id="id_mvp_coord_homog_w">0.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>=</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_coord_x">1.00</label><br/>
                            <br/><label id="id_mvp_coord_y">0.00</label><br/>
                            <br/><label id="id_mvp_coord_z">0.00</label><br/>
                            <br/><label id="id_mvp_coord_w">0.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>=</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_mvp_mult_m00">1.00</label><br/>
                            <br/><label id="id_mvp_mult_m10">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m20">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_mult_m01">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m11">1.00</label><br/>
                            <br/><label id="id_mvp_mult_m21">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_mult_m02">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m12">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m22">1.00</label><br/>
                            <br/><label id="id_mvp_mult_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_mvp_mult_m03">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m13">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m23">0.00</label><br/>
                            <br/><label id="id_mvp_mult_m33">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>*</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_coord_x">1.00</label><br/>
                            <br/><label id="id_coord_y">0.00</label><br/>
                            <br/><label id="id_coord_z">0.00</label><br/>
                            <br/><label id="id_coord_w">0.00</label>
                        </div>
                        <img src="./texture/matrixR.png">
                    </div>
                    glViewport(0, 0, 720, 720);<br/>
                    ScreenCoord.x = viewPort[0] + (1 + CVV_Coord.x) * viewPort[2] / 2;<br/>
                    ScreenCoord.y = viewPort[1] + (1 + CVV_Coord.y) * viewPort[3] / 2;
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_screen_coord_x">1.00</label><br/>
                            <br/><label id="id_screen_coord_y">0.00</label><br/>
                            <br/><label id="id_screen_coord_z">0.00</label><br/>
                            <br/><label id="id_screen_coord_w">0.00</label>
                        </div>
                        <img src="./texture/matrixR.png">
                    </div>
                </div>
            </div>
            <div id="id_modelmatrix">
                <h4 style="width: 230px; background: #ffffff" data-lang="model_matrix">模型矩阵</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    ModelMatrix
                    <div id="horizontal">
                        <br/>m 0<input   id="id_m00"   style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 4<input id="id_m01"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 8<input id="id_m02"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m12<input id="id_m03"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                    </div>
                    <div id="horizontal">
                        <br/>m 1<input   id="id_m10"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 5<input id="id_m11"   style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 9<input id="id_m12"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m13<input id="id_m13"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                    </div>
                    <div id="horizontal">
                        <br/>m 2<input   id="id_m20"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 6<input id="id_m21"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m10<input id="id_m22"   style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m14<input id="id_m23"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                    </div>
                    <div id="horizontal">
                        <br/>m 3<input   id="id_m30"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m 7<input id="id_m31"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m11<input id="id_m32"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateModelMatrixByInput()"/>
                        <br/>, m15<input id="id_m33"   style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateModelMatrixByInput()"/>
                    </div>
                </div>
                <div>
                    <h4 data-lang="rotate">旋转</h4>
                    <div style="border: 1px solid #cccccc; width: 30em;">
                        glRotate
                        <div id="horizontal">
                            <br/>pitch<input  id="id_pitch" style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInput()"/>
                            <br/>, yaw<input  id="id_yaw"   style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInput()"/>
                            <br/>, roll<input id="id_roll"  style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInput()"/>
                        </div>
                    </div>
                    <h4 data-lang="translate">平移</h4>
                    <div style="border: 1px solid #cccccc; width: 30em;">
                        glTranslate
                        <div id="horizontal">
                            <br/>translateX<input   id="id_translate_x" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateTranslateByInput()"/>
                            <br/>, translateY<input id="id_translate_y" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateTranslateByInput()"/>
                            <br/>, translateZ<input id="id_translate_z" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateTranslateByInput()"/>
                        </div>
                    </div>
                    <h4 data-lang="scale">缩放</h4>
                    <div style="border: 1px solid #cccccc; width: 30em;">
                        glScale
                        <div id="horizontal">
                            <br/>scaleX<input   id="id_scale_x" style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateScaleByInput()"/>
                            <br/>, scaleY<input id="id_scale_y" style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateScaleByInput()"/>
                            <br/>, scaleZ<input id="id_scale_z" style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateScaleByInput()"/>
                        </div>
                    </div>
                </div>
            </div>
            <div id="id_viewmatrix">
                <h4 style="width: 230px; background: #ffffff" data-lang="view_matrix_transform">视图变换</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    gluLookAt
                    <div id="horizontal">
                        <br/>eyeX<input  id="id_eye_x"  style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, eyeY<input id="id_eye_y"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, eyeZ<input id="id_eye_z"  style="width: 3.5em;" type="number" value="5.0" step="0.1" oninput="updateViewMatrixByInput()"/>
                    </div>
                    <div id="horizontal">
                        <br/>lookAtX<input  id="id_lookat_x"  style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, lookAtY<input id="id_lookat_y"   style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, lookAtZ<input id="id_lookat_z"  style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                    </div>
                    <div id="horizontal">
                        <br/>cameraUpX<input  id="id_cameraup_x"  style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, cameraUpY<input id="id_cameraup_y"   style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateViewMatrixByInput()"/>
                        <br/>, cameraUpZ<input id="id_cameraup_z"  style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateViewMatrixByInput()"/>
                    </div>
                </div>
                <h4 data-lang="view_matrix">视图矩阵</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    ViewMatrix = 
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_viewmatrix_m00">1.00</label><br/>
                            <br/><label id="id_viewmatrix_m10">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m20">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_viewmatrix_m01">1.00</label><br/>
                            <br/><label id="id_viewmatrix_m11">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m21">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_viewmatrix_m02">1.00</label><br/>
                            <br/><label id="id_viewmatrix_m12">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m22">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_viewmatrix_m03">1.00</label><br/>
                            <br/><label id="id_viewmatrix_m13">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m23">0.00</label><br/>
                            <br/><label id="id_viewmatrix_m33">0.00</label>
                        </div>
    
                        <img src="./texture/matrixR.png">
                    </div>
                </div>
            </div>
            <div id="id_projmatrix">
                <h4 style="width: 230px; background: #ffffff" data-lang="pers_proj_matrix">透视投影变换</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    gluPerspective
                    <div id="horizontal">
                        <br/>fov<input id="id_fov" style="width: 3.5em;" type="number" value="50" step="1.0" oninput="updateProjMatrixByInput()"/>
                        <br/>, aspect<input id="id_aspect" style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateProjMatrixByInput()"/>
                        <br/>, zNear<input id="id_near" style="width: 3.5em;" type="number" value="1.0" step="0.1" oninput="updateProjMatrixByInput()"/>
                        <br/>, zFar<input id="id_far" style="width: 3.5em;" type="number" value="15.0" step="0.1" oninput="updateProjMatrixByInput()"/>
                    </div>
                </div>
                <h4 data-lang="proj_matrix">投影矩阵</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    ProjMatrix = 
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_projmatrix_m00">1.00</label><br/>
                            <br/><label id="id_projmatrix_m10">0.00</label><br/>
                            <br/><label id="id_projmatrix_m20">0.00</label><br/>
                            <br/><label id="id_projmatrix_m30">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_projmatrix_m01">1.00</label><br/>
                            <br/><label id="id_projmatrix_m11">0.00</label><br/>
                            <br/><label id="id_projmatrix_m21">0.00</label><br/>
                            <br/><label id="id_projmatrix_m31">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_projmatrix_m02">1.00</label><br/>
                            <br/><label id="id_projmatrix_m12">0.00</label><br/>
                            <br/><label id="id_projmatrix_m22">0.00</label><br/>
                            <br/><label id="id_projmatrix_m32">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_projmatrix_m03">1.00</label><br/>
                            <br/><label id="id_projmatrix_m13">0.00</label><br/>
                            <br/><label id="id_projmatrix_m23">0.00</label><br/>
                            <br/><label id="id_projmatrix_m33">0.00</label>
                        </div>
    
                        <img src="./texture/matrixR.png">
                    </div>
                </div>
            </div>
            <div id="id_rotatematrix">
                <h4 style="width: 230px; background: #ffffff" data-lang="euler_angle_rotation">欧拉角旋转</h4>
                <div style="border: 1px solid #cccccc; width: 30em;">
                    EulerAngle
                    <div id="horizontal">
                        <br/>pitch<input  id="id_pitch_eular" style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInputEular()"/>
                        <br/>, yaw<input  id="id_yaw_eular"   style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInputEular()"/>
                        <br/>, roll<input id="id_roll_eular"  style="width: 3.5em;" type="number" value="0" step="5" oninput="updateEulerAngleByInputEular()"/>
                    </div>
                </div>
                <h4 data-lang="rotation_matrix">旋转矩阵</h4>
                <div style="border: 1px solid #cccccc; width: 48em; padding: 5px">
                    RotateMatrix = (ZYX顺规——因为物体坐标系相对世界坐标系z-y-x旋转顺序时，将最后的物体坐标系向世界坐标系转换时需要逆序进行，因此矩阵反序相乘)
                    <div id="horizontal" style="margin: 5px">
                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_rotatematrix_m00">1.00</label><br/>
                            <br/><label id="id_rotatematrix_m10">0.00</label><br/>
                            <br/><label id="id_rotatematrix_m20">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotatematrix_m01">0.00</label><br/>
                            <br/><label id="id_rotatematrix_m11">1.00</label><br/>
                            <br/><label id="id_rotatematrix_m21">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotatematrix_m02">0.00</label><br/>
                            <br/><label id="id_rotatematrix_m12">0.00</label><br/>
                            <br/><label id="id_rotatematrix_m22">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>=</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_rotate_z_matrix_m00">1.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m10">0.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m20">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_z_matrix_m01">0.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m11">1.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m21">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_z_matrix_m02">0.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m12">0.00</label><br/>
                            <br/><label id="id_rotate_z_matrix_m22">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>*</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_rotate_y_matrix_m00">1.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m10">0.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m20">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_y_matrix_m01">0.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m11">1.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m21">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_y_matrix_m02">0.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m12">0.00</label><br/>
                            <br/><label id="id_rotate_y_matrix_m22">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">

                        <label>*</label>

                        <img src="./texture/matrixL.png">
                        <div id="matrix">
                                 <label id="id_rotate_x_matrix_m00">1.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m10">0.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m20">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_x_matrix_m01">0.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m11">1.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m21">0.00</label>
                        </div>
                        <div id="matrix">
                                 <label id="id_rotate_x_matrix_m02">0.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m12">0.00</label><br/>
                            <br/><label id="id_rotate_x_matrix_m22">1.00</label>
                        </div>
                        <img src="./texture/matrixR.png">
                    </div>
                </div>
            </div>
        </div>
        <div id="id_axisangle">
            <h4 style="width: 230px; background: #ffffff" data-lang="axis_angle_rot">轴角旋转</h4>
            <div style="border: 1px solid #cccccc; width: 30em;">
                <div id="horizontal" style="margin: 5px">
                    <br/>axis, x = <input  id="id_axis_x" style="width: 3.5em;" type="number" value="1" step="1" oninput="updateAxisAngleValue()"/>
                    <br/>, y = <input  id="id_axis_y" style="width: 3.5em;" type="number" value="0" step="1" oninput="updateAxisAngleValue()"/>
                    <br/>, z = <input id="id_axis_z" style="width: 3.5em;" type="number" value="0" step="1" oninput="updateAxisAngleValue()"/>
                </div>
                <div id="horizontal" style="margin: 5px">
                    <br/>angle = <input  id="id_axis_angle" style="width: 3.5em;" type="number" value="0" step="5" oninput="updateAxisAngleValue()"/>
                </div>
            </div>
            <h4 data-lang="rotation_matrix">旋转矩阵</h4>
            <div style="border: 1px solid #cccccc; width: 48em; padding: 5px">
                RotateMatrix = 
                <div id="horizontal" style="margin: 5px">
                    <img src="./texture/matrixL.png">
                    <div id="matrix">
                             <label id="id_aa_rotatematrix_m00">1.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m10">0.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m20">0.00</label>
                    </div>
                    <div id="matrix">
                             <label id="id_aa_rotatematrix_m01">0.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m11">1.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m21">0.00</label>
                    </div>
                    <div id="matrix">
                             <label id="id_aa_rotatematrix_m02">0.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m12">0.00</label><br/>
                        <br/><label id="id_aa_rotatematrix_m22">1.00</label>
                    </div>

                    <img src="./texture/matrixR.png">
                </div>
            </div>
        </div>
        <div id="id_quaternion">
            <h4 style="width: 230px; background: #ffffff" data-lang="quaternion_rot">四元数旋转</h4>
            <div style="border: 1px solid #cccccc; width: 30em;">
                <div id="horizontal" style="margin: 5px">
                    <br/>quaternion, x = <input  id="id_quat_x" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateQuaternionValue()"/>
                    <br/>, y = <input  id="id_quat_y" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateQuaternionValue()"/>
                    <br/>, z = <input  id="id_quat_z" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateQuaternionValue()"/>
                    <br/>, w = <input  id="id_quat_w" style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateQuaternionValue()"/>
                </div>
            </div>
            <h4 data-lang="quaternion_rot" data-lang="rotation_matrix">旋转矩阵</h4>
            <div style="border: 1px solid #cccccc; width: 200px; padding: 5px">
                RotateMatrix = 
                <div id="horizontal" style="margin: 5px">
                    <img src="./texture/matrixL.png">
                    <div id="matrix">
                             <label id="id_quat_rotatematrix_m00">1.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m10">0.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m20">0.00</label>
                    </div>
                    <div id="matrix">
                             <label id="id_quat_rotatematrix_m01">0.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m11">1.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m21">0.00</label>
                    </div>
                    <div id="matrix">
                             <label id="id_quat_rotatematrix_m02">0.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m12">0.00</label><br/>
                        <br/><label id="id_quat_rotatematrix_m22">1.00</label>
                    </div>

                    <img src="./texture/matrixR.png">
                </div>
            </div>
            <img src="./texture/quaternion.png" width="400px">
        </div>
        <div id="id_cobramaneuvre">
            <h4 style="width: 230px; background: #ffffff" data-lang="prototype">原型图：</h4>

            <div id="vertical" style="margin: 5px">
                <img src="./texture/cobra.gif">
                <br><label>Init Quaternion = </label><label id="id_cobra_init_quat">[0, 0, 0, 1]</label>
                <br><label>Step1 Quaternion = quat.fromEuler(0,   0,   0) = </label><label id="id_cobra_step1_quat">[0, 0, 0, 1]</label>
                <br><label>Step2 Quaternion = quat.fromEuler(120,   0,  30) = </label><label id="id_falling_leaf_step1_quat">[0, 0, 0, 1]</label>
                <br><label>Step3 Quaternion = quat.fromEuler(100, -20,  90) = </label><label id="id_falling_leaf_step2_quat">[0, 0, 0, 1]</label>
                <br><label>Step4 Quaternion = quat.fromEuler(80,  -40, 180) = </label><label id="id_falling_leaf_step3_quat">[0, 0, 0, 1]</label>
                <br><label>Step5 Quaternion = quat.fromEuler(60,  -20, 270) = </label><label id="id_falling_leaf_step4_quat">[0, 0, 0, 1]</label>
                <br><label>Step6 Quaternion = quat.fromEuler(40,    0, 360) = </label><label id="id_cobra_step2_quat">[0, 0, 0, 1]</label>
                <br><br><label>Interpolation Quaternion = quat.fromEuler(0,   0,   0) = </label><label id="id_cobra_interpolate_quat">[0, 0, 0, 1]</label>
            </div>
        </div>
        <div id="id_lightdemo">
            <div>
            <button style="display:block; width: 200px; height: 30px" onclick="updateLightShader('lightDemo')" data-lang="compile_and_run">编译并运行</button>
            <h5 style="width: 230px; background: #ffffff">基本光照:<br><br>
                <input type="checkbox" id="ambientLightCheckBox" checked onchange="updateLightSwitch()" data-lang="ambient_light"/>环境光<br>
                <input type="checkbox" id="diffuseLightCheckBox" checked onchange="updateLightSwitch()" data-lang="diffuse_light"/>漫射光<br>
                <input type="checkbox" id="specularLightCheckBox" checked onchange="updateLightSwitch()" data-lang="spec_light"/>镜面光<br><br>
                <div style="border: 1px solid #cccccc; width: 200px; margin: 1px;">
                    环境光颜色
                    <br/>Red  : <br/><input id="ambient_color_red"   style="width: 160px;" type="range" value="0.5" min="0.0" max="1.0" step="0.01" oninput="updateAmbientColor()"/><label id="label_ambient_red"></label>
                    <br/>Green: <input id="ambient_color_green" style="width: 160px;" type="range" value="0.5" min="0.0" max="1.0" step="0.01" oninput="updateAmbientColor()"/><label id="label_ambient_green"></label>
                    <br/>Blue : <input id="ambient_color_blue"  style="width: 160px;" type="range" value="0.5" min="0.0" max="1.0" step="0.01" oninput="updateAmbientColor()"/><label id="label_ambient_blue"></label>
                </div>
                <div style="border: 1px solid #cccccc; width: 200px; margin: 1px;">
                    漫反射光颜色
                    <br/>Red  : <br/><input id="diffuse_color_red"   style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateDiffuseColor()"/><label id="label_diffuse_red"></label>
                    <br/>Green: <input id="diffuse_color_green" style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateDiffuseColor()"/><label id="label_diffuse_green"></label>
                    <br/>Blue : <input id="diffuse_color_blue"  style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateDiffuseColor()"/><label id="label_diffuse_blue"></label>
                </div>
                <div style="border: 1px solid #cccccc; width: 200px; margin: 1px;">
                    镜面光颜色
                    <br/>Red  : <br/><input id="specular_color_red"   style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateSpecularColor()"/>
                    <label id="label_specular_red"></label>
                    <br/>Green: <input id="specular_color_green" style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateSpecularColor()"/>
                    <label id="label_specular_green"></label>
                    <br/>Blue : <input id="specular_color_blue"  style="width: 160px;" type="range" value="1.0" min="0.0" max="1.0" step="0.01" oninput="updateSpecularColor()"/>
                    <label id="label_specular_blue"></label>
                    <br/>粗糙度: <input id="specular_shininess"  style="width: 160px;" type="range" value="0.33" min="0.0" max="1.0" step="0.01" oninput="updateSpecularShininess()"/>
                    <label id="label_specular_shininess"></label>
                </div>
            </h5>
            </div>
            <div id="vertical">
                <div id="horizontal" style="width: 90em;">
                    <div id="vertical">
                        <b>顶点着色器（VertexShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_light_vertex_shader">
                        </textarea>
                    </div>
                    <div id="vertical">
                        <b>片元着色器（FragmentShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_light_fragment_shader">
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
        <div id="id_per_vertex_or_frag_lighting">
            <div>
                <button style="display:block; width: 200px; height: 30px" onclick="updateSphereShader()" data-lang="compile_and_run">编译并运行</button>
                <h5 style="width: 230px; background: #ffffff" data-lang="per_vertex_frag_lighting_tip">逐顶点/逐像素光照<br><br></h5>
                <input type="radio" id="id_per_vertex_rb" name="per_vertex_frag" value="per_vertex" checked onchange="updatePerVflSwitch()"/>逐顶点<br>
                <input type="radio" id="id_per_frag_rb" name="per_vertex_frag" value="per_frag" onchange="updatePerVflSwitch()"/>逐像素<br>
            </div>
            <div id="vertical">
                <div id="id_per_vertex_shader" style="width: 90em;">
                    <div id="vertical">
                        <b>顶点着色器（VertexShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_per_vertex_vertex_shader">
attribute vec4 aPosition;
attribute vec3 aNormal;
attribute vec4 aColor;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform vec3 uLightDir;
uniform mat4 uVIMatrix;
uniform mat4 uMITMatrix;    // Inverse & Transpose of Model Matrix

varying vec4 vPosition;
varying vec4 vColor;
varying vec3 vNormal;
varying vec3 vLightDir;
varying vec4 vViewDir;

void main() {
    vec4 pntPos = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition;
    gl_Position = pntPos;
    vPosition = uModelMatrix * aPosition;
    vNormal = normalize(vec3(uMITMatrix * vec4(aNormal, 0.0)));
    vLightDir = normalize(uLightDir);
    vViewDir = normalize(uVIMatrix * vec4(0.0, 0.0, 0.0, 1.0) - vPosition);
    vColor = aColor;
}
                        </textarea>
                    </div>
                    <div id="vertical">
                        <b>片元着色器（FragmentShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_per_vertex_fragment_shader">
precision mediump float;

uniform float uSpecular;
uniform vec4 uKa;
uniform vec4 uKd;
uniform vec4 uKs;

varying vec4 vPosition;
varying vec4 vColor;
varying vec3 vNormal;
varying vec3 vLightDir;
varying vec4 vViewDir;

void main() {
    vec4 color = vColor;
    vec3 reflectDir = normalize(2.0 * dot(vNormal, vLightDir) * vNormal - vLightDir);
    vec4 ambientColor = uKa;
    vec4 diffuseColor = vec4(uKd.rgb * clamp(dot(vNormal, vLightDir), 0.0, 1.0), uKd.a);
    vec4 specularColor = vec4(uKs.rgb * pow(clamp(dot(reflectDir, vec3(vViewDir.xyz)), 0.0, 1.0), uSpecular), uKs.a);
    gl_FragColor = (ambientColor + diffuseColor + specularColor) * color;
    gl_FragColor.a = 1.0;
}
                        </textarea>
                    </div>
                </div>
                <div id="id_per_frag_shader" style="width: 90em;">
                    <div id="vertical">
                        <b>顶点着色器（VertexShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_per_frag_vertex_shader">
attribute vec4 aPosition;
attribute vec3 aNormal;
attribute vec4 aColor;

uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;

varying vec4 vPosition;
varying vec4 vColor;
varying vec3 vNormal;

void main() {
    vec4 pntPos = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition;
    gl_Position = pntPos;
    vPosition = uModelMatrix * aPosition;
    vNormal = aNormal;
    vColor = aColor;
}
                        </textarea>
                    </div>
                    <div id="vertical">
                        <b>片元着色器（FragmentShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_per_frag_fragment_shader">
precision mediump float;

uniform vec3 uLightDir;
uniform mat4 uVIMatrix;
uniform mat4 uMITMatrix;    // Inverse & Transpose of Model Matrix

uniform float uSpecular;
uniform vec4 uKa;
uniform vec4 uKd;
uniform vec4 uKs;

varying vec4 vPosition;
varying vec4 vColor;
varying vec3 vNormal;

void main() {
    vec3 lightDir = normalize(uLightDir);
    vec4 color = vColor;
    vec3 normal = normalize(vec3(uMITMatrix * vec4(vNormal, 0.0)));
    vec3 reflectDir = normalize(2.0 * dot(normal, lightDir) * normal - lightDir);
    vec4 viewDir = normalize(uVIMatrix * vec4(0.0, 0.0, 0.0, 1.0) - vPosition);
    vec4 ambientColor = uKa;
    vec4 diffuseColor = vec4(uKd.rgb * clamp(dot(normal, lightDir), 0.0, 1.0), uKd.a);
    vec4 specularColor = vec4(uKs.rgb * pow(clamp(dot(reflectDir, vec3(viewDir.xyz)), 0.0, 1.0), uSpecular), uKs.a);
    gl_FragColor = (ambientColor + diffuseColor + specularColor) * color;
    gl_FragColor.a = 1.0;
}
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
        <div id="id_shadowdemo">
            <div>
                <button style="display:block; width: 200px; height: 30px" onclick="updateLightShader('shadowDemo')" data-lang="compile_and_run">编译并运行</button>
                <h5 style="width: 230px; background: #ffffff" data-lang="real_time_shadow">实时阴影<br><br></h5>
            </div>
            <div id="vertical">
                <div id="horizontal" style="width: 90em;">
                    <div id="vertical">
                        <b>Step 1:   顶点着色器（VertexShader）</b>
                        <textarea spellcheck="false" rows="7" cols="95" id="id_fbo_vertex_shader">
                        </textarea>
                    </div>
                    <div id="vertical">
                        <b>片元着色器（FragmentShader）</b>
                        <textarea spellcheck="false" rows="7" cols="95" id="id_fbo_fragment_shader">
                        </textarea>
                    </div>
                </div>
                <div id="horizontal" style="width: 90em;">
                    <div id="vertical">
                        <b>Step 2:   顶点着色器（VertexShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_shadow_vertex_shader">
                        </textarea>
                    </div>
                    <div id="vertical">
                        <b>片元着色器（FragmentShader）</b>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_shadow_fragment_shader">
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
        <div id="id_uv_demo">
            <h4 style="width: 230px; background: #ffffff" data-lang="uv_coord">UV坐标</h4>
            <div style="border: 1px solid #cccccc; width: 15em;">
                <h5 style="width: 230px; background: #ffffff">GL_TEXTURE_MIN_FILTER</h5>
                <input type="radio" id="id_min_gl_nearest" name="GL_TEXTURE_MIN_FILTER" value="GL_NEAREST" checked onchange="updateUVMinFilter()"/>GL_NEAREST<br>
                <input type="radio" id="id_min_gl_linear" name="GL_TEXTURE_MIN_FILTER" value="GL_LINEAR" onchange="updateUVMinFilter()"/>GL_LINEAR<br>
            </div>
            <div style="border: 1px solid #cccccc; width: 15em;">
                <h5 style="width: 230px; background: #ffffff">GL_TEXTURE_MAG_FILTER</h5>
                <input type="radio" id="id_mag_gl_nearest" name="GL_TEXTURE_MAG_FILTER" value="GL_NEAREST" checked onchange="updateUVMagFilter()"/>GL_NEAREST<br>
                <input type="radio" id="id_mag_gl_linear" name="GL_TEXTURE_MAG_FILTER" value="GL_LINEAR" onchange="updateUVMagFilter()"/>GL_LINEAR<br>
            </div>
            <div style="border: 1px solid #cccccc; width: 15em;">
                <h5 style="width: 230px; background: #ffffff">GL_TEXTURE_WRAP_S</h5>
                <input type="radio" id="id_gl_wrap_s_repeat" name="GL_TEXTURE_WRAP_S" value="GL_REPEAT" checked onchange="updateUVWrapST()"/>GL_REPEAT<br>
                <input type="radio" id="id_gl_wrap_s_clamp" name="GL_TEXTURE_WRAP_S" value="GL_CLAMP" onchange="updateUVWrapST()"/>GL_CLAMP<br>
            </div>
            <div style="border: 1px solid #cccccc; width: 15em;">
                <h5 style="width: 230px; background: #ffffff">GL_TEXTURE_WRAP_T</h5>
                <input type="radio" id="id_gl_wrap_t_repeat" name="GL_TEXTURE_WRAP_T" value="GL_REPEAT" checked onchange="updateUVWrapST()"/>GL_REPEAT<br>
                <input type="radio" id="id_gl_wrap_t_clamp" name="GL_TEXTURE_WRAP_T" value="GL_CLAMP" onchange="updateUVWrapST()"/>GL_CLAMP<br>
            </div>
            <div style="border: 1px solid #cccccc; width: 29em;">
                <div id="horizontal" style="margin: 5px">
                    <br/>vertex1, u = <input  id="id_uv_u_1" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateUVData()"/>
                    <br/>, v = <input  id="id_uv_v_1" style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateUVData()"/>
                </div>
                <div id="horizontal" style="margin: 5px">
                    <br/>vertex2, u = <input  id="id_uv_u_2" style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateUVData()"/>
                    <br/>, v = <input  id="id_uv_v_2" style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateUVData()"/>
                </div>
                <div id="horizontal" style="margin: 5px">
                    <br/>vertex3, u = <input  id="id_uv_u_3" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateUVData()"/>
                    <br/>, v = <input  id="id_uv_v_3" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateUVData()"/>
                </div>
                <div id="horizontal" style="margin: 5px">
                    <br/>vertex4, u = <input  id="id_uv_u_4" style="width: 3.5em;" type="number" value="1" step="0.1" oninput="updateUVData()"/>
                    <br/>, v = <input  id="id_uv_v_4" style="width: 3.5em;" type="number" value="0" step="0.1" oninput="updateUVData()"/>
                </div>
            </div>
        </div>
        <div id="id_yuv_video">
            <div>
                <button style="display:block; width: 200px; height: 30px" onclick="updateYUVVideoShader()" data-lang="compile_and_run">编译并运行</button>
                <h5 style="width: 230px; background: #ffffff">YUV Video Filter<br><br></h5>
                <input type="radio" id="id_filter_normal_rb" name="video_filter" value="filter_normal" data-lang="video_filter_normal" checked onchange="updateYUVVideoFilterSwitch()"/>Normal<br>
                <input type="radio" id="id_filter_inverse_rb" name="video_filter" value="filter_inverse" data-lang="video_filter_inverse" onchange="updateYUVVideoFilterSwitch()"/>Inverse<br>
                <input type="radio" id="id_filter_reminiscence_rb" name="video_filter" value="filter_reminiscence" onchange="updateYUVVideoFilterSwitch()"/>Snow Reminiscence<br>
                <input type="radio" id="id_filter_lut_illusion_rb" name="video_filter" value="filter_lut_illusion" onchange="updateYUVVideoFilterSwitch()"/>Lut Illusion<br>
                <input type="radio" id="id_filter_soul_out_rb" name="video_filter" value="filter_soul_out" onchange="updateYUVVideoFilterSwitch()"/>Soul Out<br>
            </div>
            <div id="vertical">
                <div id="id_video_filter" style="width: 90em;">
                    <div id="vertical">
                        <div id="horizontal" style="margin: 5px"> <b>顶点着色器（VertexShader）</b> <input type="file" id="file_filter_vertex_shader" name="files"/> </div>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_video_filter_vertex_shader">
attribute vec4 aPosition;
attribute vec2 aTexCoord;
uniform mat4 uMVPMatrix;
varying lowp vec2 vTexCoord;

void main() {
    gl_Position = uMVPMatrix * aPosition;
    vTexCoord = aTexCoord;
}
                        </textarea>
                    </div>
                    <div id="vertical">
                        <div id="horizontal" style="margin: 5px"> <b>片元着色器（FragmentShader）</b> <input type="file" id="file_filter_frag_shader" name="files"/> </div>
                        <textarea spellcheck="false" rows="31" cols="95" id="id_video_filter_fragment_shader">
precision mediump float;

uniform sampler2D uTexSampler;
varying lowp vec2 vTexCoord;

void main() {
    gl_FragColor = texture2D(uTexSampler, vTexCoord);
}
                        </textarea>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>